import React from "react";
import { Button, Space, Swiper, Toast } from "antd-mobile";

// 商城页面
import "./Goods.less"

const colors = [
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
  "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
];
const getDate = [
  {
    title: "热销单品",
    list: [
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "储物柜",
      },
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "照明灯",
      },
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "抱枕",
      },
      {
        imgUrl:
          "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        textName: "镜子",
      },
    ],
  },
  {
    title: "家庭常用",
    list: [
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "落地灯",
      },
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "置物架",
      },
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "矮脚灯",
      },
      {
        imgUrl:
          "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        textName: "毛巾",
      },
    ],
  },
];

export default class Goods extends React.Component {
  divList = () => {
    return (
      <>
        {getDate.map((item, index) => {
          return (
            <div key={index}>
              <p>{item.title}</p>
              <ul className="mians">
                {item.list.map((item1) => {
                  return (
                    <li key={item1.textName}>
                      <div className="divImg">
                        <img src={item1.imgUrl} alt="" />
                      </div>
                      <p>{item1.textName}</p>
                    </li>
                  );
                })}
              </ul>
            </div>
          );
        })}
      </>
    );
  };

  render() {
    return (
      <div>
        <div className="changeIndexsd">
          <ul className="input">
            <li>
              <i className="iconfont"></i>
            </li>
            <li>
              <div className="formIndex">
                <i className="iconfont icon-seach" />
                <span className="text">搜索</span>
              </div>
            </li>
            <li>
              <i className="iconfont icon-gouwuche"></i>
            </li>
          </ul>
        </div>
        <div>
          <Swiper autoplay loop>
            {colors.map((item, index) => (
              <Swiper.Item key={index}>
                <img className="content" src={item} alt="" />
              </Swiper.Item>
            ))}
          </Swiper>
        </div>
        <div className="comtiy">
          <div className="nav">
            <ul className="ulList">
              <li>新品上市</li>
              <li>二手商城</li>
            </ul>
          </div>
          <div className="main">{this.divList()}</div>
        </div>
      </div>
    );
  }
}
